<template>
    <div class="title_big">
        {{ text }}
        <div class="back_big">
            <icon_back @click="back" />
        </div>
    </div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const props = defineProps(
    {
        text: {
            type: String,
            default: () => ''
        }
    }
)
const icon_back = defineAsyncComponent(() => import('../common/icon_back.vue'))
function back() {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
@function r($v) {
    @return $v / (390 / 10rem)
}

.back_big {
    position: absolute;
    top: 50%;
    left: r(20);
    width: r(15);
    height: r(15);
    transform: translateY(-50%);
}

.title_big {
    width: 100%;
    height: r(44);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: r(16);
    position: relative;
}
</style>